<style lang="less">
  .padding {
    box-sizing: border-box;
    padding: 0px 30px;
  }
  .home {
    width: 100%;
    font-size: 28px;
    @import "../assets/less/nav.less";
    .classify {
      width: 100%;
      height: 90px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .padding;
      .active {
        color: rgb(254, 155, 78);
      }
      >div {
        &:not(:first-child) {
          margin-left: 10px;
        }
      }
    }
    .list {
      width: 100%;
      .padding;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      .item {
        font-size: 28rpx;
        >img {
          background-color: skyblue;
          width: 260px; // height: 350px;
        }
        >div {
          width: 260px;
          min-height: 40px;
        }
        &:nth-child(n + 4) {
          margin-top: 20px;
        }
        &:not(:nth-child(3n + 1)) {
          margin-left: 15px;
        }
      }
    }
    .card-container {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: fixed;
      left: 0;
      top: 0;
      .card {
        width: 780px; // height: 1200px;
        max-height: 1500px;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .title {
          width: 100%;
          height: 100px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 28px;
          position: relative;
          .close {
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 36px;
          }
        }
        .content {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          >img {
            // width: 650px;
            // height: auto;
            width: auto;
            height: 1080px;
          }
        }
        .tips {
          width: 100%;
          height: 90px;
          line-height: 90px;
          text-align: center;
        }
      }
    }
    #card_modal {
      width: 1080px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: fixed;
      left: -1080px;
      top: 50px;
      .logo {
        width: 100%;
        height: 60px;
        margin-bottom: -75px;
        font-family: "雅痞-简";
        color: white;
        font-size: 60px;
        position: relative;
        z-index: 10001;
        text-align: left;
        box-sizing: border-box;
        padding: 30px;
        font-weight: 700;
      }
      >img {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 10000;
      }
      .userInfo {
        width: 100%;
        min-height: 200px;
        margin-top: -200px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; // background-color: rgba(254, 155, 78, 0.6);
        font-size: 46px;
        position: relative;
        z-index: 10001; // font-family: "手札体";
        font-family: "雅痞-简";
        >div {
          //左边用户信息框
          &:nth-child(1) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            >div {
              &:nth-child(2) {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                font-weight: bold;
                flex-wrap: wrap;
              }
            }
          } // 右边二维码
          &:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
        }
        .avatar-box {
          width: 30px;
          height: 130px;
          margin: 0 40px;
          margin-right: 0;
          font-weight: bold;
        }
        .avatar {
          width: 150px;
          height: 150px;
          // background-color: aqua;
          margin: 0 40px;
        }
        .qrcode {
          width: 120px;
          height: 120px;
          // background-color: aquamarine;
          margin: 0 20px;
        }
      }
    }
    .preload {
      width: 1080px;
      position: fixed;
      left: -1200px;
      top: 50px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      >img {
        width: 100%;
      }
    }
  }
</style>

<template>
  <div class="home">
    <div class="nav">
      <div class="left">
        <!-- <van-icon name="arrow-left"></van-icon> -->
      </div>
      <div>海报中心</div>
      <div class="user" @click="bindToUser">
        <van-icon name="manager"></van-icon>
      </div>
    </div>
    <div class="classify">
      <div :class="activeIndex==index?'active':''" v-for="(item, index) in classifyList" :data-index="index" @click="bindClassifyChange">{{ item.name }}</div>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in imageList" :data-index="index" @click="bindSelect(index, $event)">
        <img :src="base_url_image + item.image_watermark">
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="card-container" v-show="cardShow">
      <div class="card">
        <div class="title">
          <div>
            <!-- <van-button></van-button> -->
          </div>
          <div class="close" @click="bindCardClose">
            <van-icon name="cross"></van-icon>
          </div>
        </div>
        <div class="content">
          <van-loading v-show="!createReady" />
          <img :src="createImageResult" v-show="createReady" />
        </div>
        <div class="tips">长按保存图片</div>
      </div>
    </div>
    <div class="content" id="card_modal" ref="card_modal">
      <div class="logo" :style="{ color: '#' + infoColor }">房知了</div>
      <img :src="selectImage" @load="bindSelectImageload">
      <div class="userInfo">
        <div>
          <!-- <img :src="user_avatar" class="avatar"> -->
          <div class="avatar-box" :style="{ color: '#' + infoColor }">
            
          </div>
          <div :style="{ color: '#' + infoColor }">
            <div>{{ userInfo.user.username }}</div>
            <div>购房热线:{{ userInfo.user.phone }}</div>
          </div>
        </div>
        <div>
          <img :src="user_qrcode" class="qrcode">
        </div>
      </div>
    </div>
    <div class="preload">
      <img :src="createImageResult" @load="bindShowImageOnload" />
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  import {
    Button,
    NavBar,
    Icon,
    Dialog,
    Loading
  } from "vant";
  export default {
    name: "list",
    components: {
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      [Icon.name]: Icon,
      [Dialog.name]: Dialog,
      [Loading.name]: Loading,
    },
    data: function() {
      return {
        base_url_image: "",
        activeIndex: 0,
        classifyList: [],
        cardShow: false,
        imageList: [],
        imageListOrigin: [],
        selectImage: null,
        user_avatar: null,
        user_qrcode: null,
        createImageResult: '',
        infoColor: '000000',
        createReady: false,
        showImageMargin: '-1000px',
        userInfo: {
          code: {
            codeimage: ''
          },
          user: {
            username: '',
            phone: '',
            company: '',
            job: ''
          }
        }
      };
    },
    methods: {
      bindClassifyChange: function(e) {
        let index = e.target.dataset.index;
        this.activeIndex = index;
        this.imageList = this.__getImageListFilter(this.imageListOrigin);
      },
      bindSelect: function(index, e) {
        let self = this;
        if (this.userInfo.user.phone == null || this.userInfo.user.phone == "") {
          alert('快点点击右上角图标完善你的信息，领取个人海报吧！');
          return;
        }
        if (this.userInfo.user.username == null || this.userInfo.user.username == "") {
          alert('快点点击右上角图标完善你的信息，领取个人海报吧！');
          return;
        }
        let url = this.base_url_image + this.imageList[index].image_original;
        this.infoColor = this.imageList[index].color;
        this.convertImgToBase64(url, function(dataURL) {
          self.selectImage = dataURL;
        })
        this.__updateDownloadNumber(this.imageList[index].posters_image_id);
        this.selectIndex = index;
        this.createReady = false;
        this.cardShow = true;
      },
      bindCardClose: function() {
        this.cardShow = false;
      },
      bindToUser: function() {
        let id = this.globalData.userId != null ? this.globalData.userId : -1;
        this.$router.push("user?id=" + id);
      },
      bindSelectImageload: function() {
        console.log('bindSelectImageload')
        let self = this;
        self.__createImage();
      },
      bindShowImageOnload: function() {
        console.log("bindShowImageOnload");
        let self = this;
        self.createReady = true;
        clearTimeout(self.createDelayTimer);
        self.createDelayTimer = setTimeout(function() {
          // self.createReady = true;
        }, 2000);
      },
      __getList() {
        let self = this;
        this.axios.get(this.globalData.base_url + "/postersimage").then(function(res) {
          console.log(res);
          let default_ = {
            name: "全部",
            posters_type_id: -1
          };
          let arr = [];
          arr.push(default_);
          self.classifyList = [...res.data.resultObj.list, ...arr];
          self.activeIndex = self.classifyList.length == null ? 0 : self.classifyList.length - 1;
          self.imageListOrigin = res.data.resultObj.img;
          self.imageList = self.__getImageListFilter(self.imageListOrigin);
        });
      },
      __getUserInfo() {
        let self = this;
        let access_token = '';
        let userId = this.globalData.userId;
        this.axios.get(this.globalData.base_url + "/userinfo", {
          params: {
            userid: userId,
            access_token: access_token
          }
        }).then(function(res) {
          if (res.status == 500) {
            alert('服务器错误');
            return;
          }
          if (res.data.resultCode == 'error') {
            alert(res.data.resultDesc);
          }
          if (res.data.resultObj) {
            self.globalData.userInfo = res.data.resultObj;
            self.userInfo = res.data.resultObj;
            self.__getUserImagesBase64();
          }
        });
      },
      __updateDownloadNumber(imageId) {
        let self = this;
        let access_token = '';
        let userId = this.globalData.userId;
        this.axios.get(this.globalData.base_url + "/posterscount", {
          params: {
            userid: userId,
            imageid: imageId
          }
        }).then(function(res) {
        });
      },
      __getUserImagesBase64() {
        let self = this;
        let avatar = this.userInfo.user.headimage;
        this.convertImgToBase64(avatar, function(dataURL) {
          self.user_avatar = dataURL;
        })
        let qrcode = this.base_url_image + this.userInfo.code.codeimage;
        this.convertImgToBase64(qrcode, function(dataURL) {
          self.user_qrcode = dataURL;
        })
      },
      __getImageListFilter(imageListOrigin) {
        let type = this.classifyList[this.activeIndex].posters_type_id;
        console.log(type, this.classifyList);
        if (type == -1) {
          return [...imageListOrigin];
        }
        let arr = [];
        for (let index = 0; index < imageListOrigin.length; index++) {
          const element = imageListOrigin[index];
          if (element.type == type) {
            arr.push(element);
          }
        }
        console.log("arr", arr);
        return arr;
      },
      __createImage() {
        let self = this;
        this.html2canvas(this.$refs.card_modal).then(function(canvas) {
          let url = canvas.toDataURL("image/jpeg");
          self.createImageResult = url;
        });
      },
      __runDelay(timeout, callback) {
        clearTimeout(this.runDelayTimer);
        this.runDelayTimer = setTimeout(() => {
          callback && callback();
        }, timeout);
      },
      convertImgToBase64(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
          　　ctx = canvas.getContext('2d'),
          　　img = new Image;　　
        img.crossOrigin = 'Anonymous';　　
        img.onload = function() {　　
          canvas.height = img.height;　　
          canvas.width = img.width;　　
          ctx.drawImage(img, 0, 0);　　
          var dataURL = canvas.toDataURL(outputFormat || 'image/png');　　
          callback.call(this, dataURL);　　
          canvas = null;
        };　　
        img.src = url;
      },
      __getId() {
        this.globalData.userId = this.$route.query.id;
      }
    },
    created() {
      console.log('created')
      this.__getId();
      this.base_url_image = this.globalData.base_url_image;
      this.__getUserInfo();
      this.__getList();
    }
  };
</script>
